<template>
  <div>
    <el-form-item label="省" prop="province">
      <el-select
        v-model="form.province"
        placeholder="请选择"
        @change="handleBlurCity"
      >
        <el-option
          v-for="item in province"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="市" prop="city">
      <el-select
        v-model="form.city"
        placeholder="请选择"
        @change="handleBlurDistrict"
      >
        <el-option
          v-for="item in city"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="区" prop="district">
      <el-select
        v-model="form.district"
        placeholder="请选择"
        @change="handleBlurDistrictCity"
      >
        <el-option
          v-for="item in district"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { listRegion, listRegionByPid } from "@/api/solar/region";
export default {
  name: "Region",
  props: {
    Province: null,
    City: null,
    District: null,
  },
  data() {
    return {
      province: [],
      city: [],
      district: [],
      form: {
        province: this.Province,
        city: this.City,
        district: this.District,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listRegion({ pid: "0" }).then((response) => {
        this.province = response.rows;
      });
    },
    handleBlurCity() {
      listRegionByPid(this.form.province).then((response) => {
        this.city = response.rows;
        this.$emit("update:province", this.form.province); // 触发自定义事件，将选中的省份数据传递给父组件
      });
    },
    handleBlurDistrict() {
      listRegionByPid(this.form.city).then((response) => {
        this.district = response.rows;
        this.$emit("update:city", this.form.city); // 触发自定义事件，将选中的城市数据传递给父组件
      });
    },
    handleBlurDistrictCity() {
      this.$emit("update:district", this.form.district); // 触发自定义事件，将选中的区域数据传递给父组件
    },
  },
};
</script>
